<template>
<div>
       <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">注册</span>
        <span slot="more"></span>
        </LoginHeader>
    <div class="login_main">
        <div class="userinput">
      <i class="el-icon-mobile"></i>
      <input placeholder="手机号码" v-model="mobile">

  </div>
              <input type="checkbox" v-model="checked">
             <span> 我已阅读并同意《
              <a>soocas服务协议</a>
              》</span>
  <el-button :disabled="nextstep" @click="jumpverify">下一步</el-button>
    </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            mobile:'18296460613',
            checked:false
        }
    },
    computed:{
        nextstep(){
            if(this.mobile.length==11&&this.checked){
                return false
            }else{
                return true
            }
        }
    },
    components:{
        LoginHeader
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        jumpverify(){
            this.$store.commit('setphonenum',this.mobile)
            this.$router.push('/verification')
        },
        // setphonenum(){
        // }
    }
}
</script>
<style lang="less" scoped>
.login_main{
width: 70%;
    margin: 0 auto;
    text-align: center;
    >.userinput{
    margin: 100px 0 50px;
    border-bottom: 5px solid #dedede;
    >i{
        margin: 25px;
    }
    // >.el-input{
    //     width: 80%;
    // }
    input{
        border: 0;
        outline: 0;
    }
}

.el-button{
    margin-top: 100px;
    padding: 15px;
    width: 80%;
    border-radius: 30px;
}
// input[type='checkbox']{
    a{
        color: #9479cb;
    }
// }
}
</style>